import type { VNode } from 'vue'

/**
 * 表格行数据类型
 */
export type TableRowData = Record<string, unknown>

/**
 * 排序方向
 */
export type SortOrder = 'ascending' | 'descending'

/**
 * 列类型枚举
 */
export type ColumnType =
  | 'selection'    // 选择列
  | 'index'        // 序号列
  | 'expand'       // 展开列
  | 'image'        // 图片列
  | 'date'         // 日期列
  | 'tag'          // 标签列
  | 'actions'      // 操作列
  | 'custom'       // 自定义列
  | 'slot'         // 插槽列

/**
 * 操作按钮配置
 */
export interface ActionButton {
  /** 按钮文本 */
  text?: string
  /** 按钮标签 */
  label?: string
  /** 按钮类型 */
  type?: 'primary' | 'success' | 'warning' | 'info' | 'danger' | 'text' | 'default' | 'add' | 'edit' | 'delete' | 'view' | 'search' | 'export' | 'import' | 'batch-delete'
  /** 按钮尺寸 */
  size?: 'large' | 'default' | 'small'
  /** 是否为链接按钮 */
  link?: boolean
  /** 是否为朴素按钮 */
  plain?: boolean
  /** 是否禁用 */
  disabled?: boolean | ((row: TableRowData) => boolean)
  /** 是否加载中 */
  loading?: boolean | ((row: TableRowData) => boolean)
  /** 按钮图标 */
  icon?: string
  /** 点击事件处理器 */
  handler?: (row: TableRowData, index: number) => void
}

/**
 * 标签配置
 */
export interface TagConfig {
  /** 标签类型映射 */
  typeMap?: Record<string | number, 'primary' | 'success' | 'warning' | 'danger' | 'info'>
  /** 文本映射 */
  textMap?: Record<string | number, string>
  /** 标签尺寸 */
  size?: 'large' | 'default' | 'small'
  /** 标签效果 */
  effect?: 'dark' | 'light' | 'plain'
  /** 是否可关闭 */
  closable?: boolean
  /** 空值显示文本 */
  emptyText?: string
}

/**
 * 图片配置
 */
export interface ImageConfig {
  /** 图片宽度 */
  width?: number | string
  /** 图片高度 */
  height?: number | string
  /** 是否圆形 */
  round?: boolean
  /** 占位图片 */
  placeholder?: string
  /** 错误图片 */
  errorImage?: string
  /** 是否支持预览 */
  preview?: boolean
  /** 是否显示占位文本 */
  showPlaceholderText?: boolean
}

/**
 * 日期配置
 */
export interface DateConfig {
  /** 日期格式 */
  format?: string
  /** 是否显示相对时间 */
  relative?: boolean
  /** 空值显示文本 */
  emptyText?: string
}

/**
 * 列配置
 */
export interface ColumnConfig {
  /** 列标识 */
  prop?: string
  /** 列标题 */
  label?: string
  /** 列类型 */
  type?: ColumnType
  /** 列宽度 */
  width?: number | string
  /** 最小宽度 */
  minWidth?: number | string
  /** 是否固定列 */
  fixed?: boolean | 'left' | 'right'
  /** 是否可排序 */
  sortable?: boolean | 'custom'
  /** 排序方法 */
  sortMethod?: (a: TableRowData, b: TableRowData) => number
  /** 排序字段 */
  sortBy?: string | string[] | ((row: TableRowData, index: number) => string)
  /** 排序顺序 */
  sortOrders?: SortOrder[]
  /** 是否可调整列宽 */
  resizable?: boolean
  /** 格式化函数 */
  formatter?: (row: TableRowData, column: ColumnConfig, cellValue: unknown, index: number) => string
  /** 是否显示溢出提示 */
  showOverflowTooltip?: boolean
  /** 对齐方式 */
  align?: 'left' | 'center' | 'right'
  /** 表头对齐方式 */
  headerAlign?: 'left' | 'center' | 'right'
  /** 列的 className */
  className?: string
  /** 表头的 className */
  labelClassName?: string
  /** 是否可选择 */
  selectable?: (row: TableRowData, index: number) => boolean
  /** 序号起始值 */
  index?: number | ((index: number) => number)
  /** 是否隐藏 */
  hidden?: boolean
  /** 图片配置 */
  imageConfig?: ImageConfig
  /** 日期配置 */
  dateConfig?: DateConfig
  /** 标签配置 */
  tagConfig?: TagConfig
  /** 操作按钮配置 */
  actions?: ActionButton[]
  /** 自定义渲染函数 */
  render?: (row: TableRowData, column: ColumnConfig, cellValue: unknown, index: number) => VNode | string
  /** 插槽名称 */
  slotName?: string
  /** 表头插槽名称 */
  headerSlotName?: string
}

/**
 * 表格属性
 */
export interface CrudDataTableProps {
  /** 表格数据 */
  data: TableRowData[]
  /** 列配置 */
  columns: ColumnConfig[]
  /** 表格高度 */
  height?: number | string
  /** 表格最大高度 */
  maxHeight?: number | string
  /** 是否显示边框 */
  border?: boolean
  /** 表格尺寸 */
  size?: 'large' | 'default' | 'small'
  /** 是否显示斑马纹 */
  stripe?: boolean
  /** 行的 className */
  rowClassName?: string | ((row: TableRowData, index: number) => string)
  /** 行的 style */
  rowStyle?: Record<string, string> | ((row: TableRowData, index: number) => Record<string, string>)
  /** 单元格的 className */
  cellClassName?: string | ((row: TableRowData, column: ColumnConfig, rowIndex: number, columnIndex: number) => string)
  /** 单元格的 style */
  cellStyle?: Record<string, string> | ((row: TableRowData, column: ColumnConfig, rowIndex: number, columnIndex: number) => Record<string, string>)
  /** 表头行的 className */
  headerRowClassName?: string | ((row: TableRowData, index: number) => string)
  /** 表头行的 style */
  headerRowStyle?: Record<string, string> | ((row: TableRowData, index: number) => Record<string, string>)
  /** 表头单元格的 className */
  headerCellClassName?: string | ((row: TableRowData, column: ColumnConfig, rowIndex: number, columnIndex: number) => string)
  /** 表头单元格的 style */
  headerCellStyle?: Record<string, string> | ((row: TableRowData, column: ColumnConfig, rowIndex: number, columnIndex: number) => Record<string, string>)
  /** 行唯一标识的字段名 */
  rowKey?: string | ((row: TableRowData) => string)
  /** 空数据时显示的文本 */
  emptyText?: string
  /** 是否默认展开所有行 */
  defaultExpandAll?: boolean
  /** 默认展开的行 */
  expandRowKeys?: string[]
  /** 默认排序 */
  defaultSort?: { prop: string; order: SortOrder }
  /** 是否显示表头 */
  showHeader?: boolean
  /** 是否高亮当前行 */
  highlightCurrentRow?: boolean
  /** 当前行的 key */
  currentRowKey?: string | number
  /** 是否懒加载子节点数据 */
  lazy?: boolean
  /** 加载子节点数据的函数 */
  load?: (row: TableRowData, treeNode: unknown, resolve: (data: TableRowData[]) => void) => void
  /** 渲染嵌套数据的配置选项 */
  treeProps?: { children?: string; hasChildren?: string }
}

/**
 * 表格事件
 */
export interface CrudDataTableEvents {
  /** 选择项发生变化时触发 */
  'selection-change': (selection: TableRowData[]) => void
  /** 排序条件发生变化时触发 */
  'sort-change': (data: { column: ColumnConfig; prop: string; order: SortOrder | null }) => void
  /** 行被点击时触发 */
  'row-click': (row: TableRowData, column: ColumnConfig, event: Event) => void
  /** 行被双击时触发 */
  'row-dblclick': (row: TableRowData, column: ColumnConfig, event: Event) => void
  /** 行被右键点击时触发 */
  'row-contextmenu': (row: TableRowData, column: ColumnConfig, event: Event) => void
  /** 单元格被点击时触发 */
  'cell-click': (row: TableRowData, column: ColumnConfig, cell: HTMLElement, event: Event) => void
  /** 单元格被双击时触发 */
  'cell-dblclick': (row: TableRowData, column: ColumnConfig, cell: HTMLElement, event: Event) => void
  /** 单元格被右键点击时触发 */
  'cell-contextmenu': (row: TableRowData, column: ColumnConfig, cell: HTMLElement, event: Event) => void
  /** 表头被点击时触发 */
  'header-click': (column: ColumnConfig, event: Event) => void
  /** 表头被右键点击时触发 */
  'header-contextmenu': (column: ColumnConfig, event: Event) => void
  /** 当前行发生变化时触发 */
  'current-change': (currentRow: TableRowData | null, oldCurrentRow: TableRowData | null) => void
  /** 操作按钮被点击时触发 */
  'action-click': (action: ActionButton, row: TableRowData, index: number) => void
  /** 图片加载错误时触发 */
  'image-error': (row: TableRowData, column: ColumnConfig) => void
  /** 标签关闭时触发 */
  'tag-close': (row: TableRowData, column: ColumnConfig) => void
  /** 标签点击时触发 */
  'tag-click': (row: TableRowData, column: ColumnConfig) => void
}

/**
 * 表格方法
 */
export interface CrudDataTableMethods {
  /** 获取表格引用 */
  getTableRef: () => unknown
}
